<template>
	<view class="detailContainer">
		<view class="content_title">
			<view class="content_title_top">
				<view class="title">{{title}}</view>
				<u-tag :text="state > currentIndex ? '已完成' : projectInfo.isTimeout ? '已超时' : '进行中'" size='small' :type="state > currentIndex ? 'success' : projectInfo.isTimeout ? 'error' : 'primary'"></u-tag>
			</view>
			<view class="time">{{form.createTime}}</view>
		</view>
		<view class="container">
			<u-form :model="form" ref="uForm" label-position="top">

				<u-form-item label="社会投资备案表" :required="true">
					<view class="flexContainer" v-if="!isHide">
						<view class="chooseFile" :class={isColor:!file1}>{{file1 ? file1 : '请选择文件上传'}}</view>
						<u-button :ripple="true" :hair-line="false" :custom-style="{
									width:'100px',
									float:'left',
									backgroundColor: '#5c77ff',
									color:'#ffffff',
								}"
						 @click="fileUpload(1)">
							上传附件
						</u-button>
					</view>
					<view class="fileList" v-if="isHide">
						<view>
							<u-icon name="file-text" color="#285398" size="32"></u-icon>
						</view>
						<view>{{form.fileName[form.file0]}}</view>
						<view class="downLoad" @click="downLoadFile(form.file0)">下载</view>
					</view>

				</u-form-item>

				<u-form-item label="可行性研究" :required="true">
					<u-radio-group v-model="form.radio0" v-if="!isHide">
						<u-radio v-for="(item, index) in list" :key="index" :name="item.name" :disabled="item.disabled">
							{{item.name}}
						</u-radio>
					</u-radio-group>
					<view v-if="isHide">{{form.radio0}}</view>
				</u-form-item>

				<u-form-item label="实施方案" :required="true">
					<view class="flexContainer" v-if="!isHide">
						<view class="chooseFile" :class={isColor:!file2}>{{file2 ? file2 : '请选择文件上传'}}</view>
						<u-button :ripple="true" :hair-line="false" :custom-style="{
									width:'100px',
									float:'left',
									backgroundColor: '#5c77ff',
									color:'#ffffff',
								}"
						 @click="fileUpload(2)">
							上传附件
						</u-button>
					</view>
					<view class="fileList" v-if="isHide">
						<view>
							<u-icon name="file-text" color="#285398" size="32"></u-icon>
						</view>
						<view>{{form.fileName[form.file1]}}</view>
						<view class="downLoad" @click="downLoadFile(form.file1)">下载</view>
					</view>
				</u-form-item>

				<u-form-item label="是否过项目联席会" :required="true">
					<u-radio-group v-model="form.radio1" v-if='!isHide'>
						<u-radio v-for="(item, index) in list1" :key="index" :name="item.name" :disabled="item.disabled">
							{{item.name}}
						</u-radio>
					</u-radio-group>
					<view v-if="isHide">{{form.radio1}}</view>
				</u-form-item>

				<u-form-item label="政府相关会议纪要" :required="true">
					<view class="flexContainer" v-if="!isHide">
						<view class="chooseFile" :class={isColor:!file3}>{{file3 ? file3 : '请选择文件上传'}}</view>
						<u-button :ripple="true" :hair-line="false" :custom-style="{
									width:'100px',
									float:'left',
									backgroundColor: '#5c77ff',
									color:'#ffffff',
								}"
						 @click="fileUpload(3)">
							上传附件
						</u-button>
					</view>
					<view class="fileList" v-if="isHide">
						<view>
							<u-icon name="file-text" color="#285398" size="32"></u-icon>
						</view>
						<view>{{form.fileName[form.file2]}}</view>
						<view class="downLoad" @click="downLoadFile(form.file2)">下载</view>
					</view>
				</u-form-item>

				<u-form-item label="项目联席会批复" :required="true">
					<view class="flexContainer" v-if="!isHide">
						<view class="chooseFile" :class={isColor:!file4}>{{file4 ? file4 : '请选择文件上传'}}</view>
						<u-button :ripple="true" :hair-line="false" :custom-style="{
									width:'100px',
									float:'left',
									backgroundColor: '#5c77ff',
									color:'#ffffff',
								}"
						 @click="fileUpload(4)">
							上传附件
						</u-button>
					</view>
					<view class="fileList" v-if="isHide">
						<view>
							<u-icon name="file-text" color="#285398" size="32"></u-icon>
						</view>
						<view>{{form.fileName[form.file3]}}</view>
						<view class="downLoad" @click="downLoadFile(form.file3)">下载</view>
					</view>
				</u-form-item>

				<u-form-item label="立项批复" :required="true">
					<view class="flexContainer" v-if="!isHide">
						<view class="chooseFile" :class={isColor:!file5}>{{file5 ? file5 : '请选择文件上传'}}</view>
						<u-button :ripple="true" :hair-line="false" :custom-style="{
									width:'100px',
									float:'left',
									backgroundColor: '#5c77ff',
									color:'#ffffff',
								}"
						 @click="fileUpload(5)">
							上传附件
						</u-button>
					</view>
					<view class="fileList" v-if="isHide">
						<view>
							<u-icon name="file-text" color="#285398" size="32"></u-icon>
						</view>
						<view>{{form.fileName[form.file4]}}</view>
						<view class="downLoad" @click="downLoadFile(form.file4)">下载</view>
					</view>
				</u-form-item>

				<u-form-item label="水保" :required="true" >
					<u-radio-group v-model="form.radio2" v-if='!isHide'>
						<u-radio v-for="(item, index) in list" :key="index" :name="item.name" :disabled="item.disabled">
							{{item.name}}
						</u-radio>
					</u-radio-group>
					<view v-if="isHide">{{form.radio2}}</view>
				</u-form-item>

				<u-form-item label="环评" :required="true">
					<u-radio-group v-model="form.radio3" v-if='!isHide'>
						<u-radio v-for="(item, index) in list" :key="index" :name="item.name" :disabled="item.disabled">
							{{item.name}}
						</u-radio>
					</u-radio-group>
					<view v-if="isHide">{{form.radio3}}</view>
				</u-form-item>

				<u-form-item label="能评" :required="true">
					<u-radio-group v-model="form.radio4" v-if='!isHide'>
						<u-radio v-for="(item, index) in list" :key="index" :name="item.name" :disabled="item.disabled">
							{{item.name}}
						</u-radio>
					</u-radio-group>
					<view v-if="isHide">{{form.radio4}}</view>
				</u-form-item>

				<u-form-item label="方案设计" :required="true">
					<u-radio-group v-model="form.radio5" v-if='!isHide'>
						<u-radio v-for="(item, index) in list" :key="index" :name="item.name" :disabled="item.disabled">
							{{item.name}}
						</u-radio>
					</u-radio-group>
					<view v-if="isHide">{{form.radio5}}</view>
				</u-form-item>

				<u-form-item label="初步设计" :required="true">
					<u-radio-group v-model="form.radio6" v-if='!isHide'>
						<u-radio v-for="(item, index) in list" :key="index" :name="item.name" :disabled="item.disabled">
							{{item.name}}
						</u-radio>
					</u-radio-group>
					<view v-if="isHide">{{form.radio6}}</view>
				</u-form-item>

				<u-form-item label="施工图设计" :required="true">
					<u-radio-group v-model="form.radio7" v-if='!isHide'>
						<u-radio v-for="(item, index) in list" :key="index" :name="item.name" :disabled="item.disabled">
							{{item.name}}
						</u-radio>
					</u-radio-group>
					<view v-if="isHide">{{form.radio7}}</view>
				</u-form-item>

				<u-form-item label="施工图审查" :required="true">
					<u-radio-group v-model="form.radio8" v-if='!isHide'>
						<u-radio v-for="(item, index) in list" :key="index" :name="item.name" :disabled="item.disabled">
							{{item.name}}
						</u-radio>
					</u-radio-group>
					<view v-if="isHide">{{form.radio8}}</view>
				</u-form-item>

				<u-form-item label="施工图备案" :required="true">
					<u-radio-group v-model="form.radio9" v-if='!isHide'>
						<u-radio v-for="(item, index) in list" :key="index" :name="item.name" :disabled="item.disabled">
							{{item.name}}
						</u-radio>
					</u-radio-group>
					<view v-if="isHide">{{form.radio9}}</view>
				</u-form-item>

				<u-form-item label="预算" :required="true" :border-bottom="false">
					<view class="content_bottom_row">
						<u-input v-model="form.money0" type="text" :disabled='isHide' :custom-style="{
									width:'50vw',
									backgroundColor:'#f2f3f5',
									borderRadius: '5px',
									padding:'5px 10px',
									margin:'0',
								}" />
						<view style="margin-left: 5px;">
							万元
						</view>
					</view>
				</u-form-item>

				<u-form-item label="财评" :required="true" :border-bottom="false">
					<view class="content_bottom_row">
						<u-input v-model="form.money1" type="text" :disabled='isHide' :custom-style="{
									width:'50vw',
									backgroundColor:'#f2f3f5',
									borderRadius: '5px',
									padding:'5px 10px',
									margin:'0',
								}" />
						<view style="margin-left: 5px;">
							万元
						</view>
					</view>
				</u-form-item>

				<u-form-item label="中标单位" :required="true" :border-bottom="false">
					<view class="content_bottom_row">
						<u-input v-model="form.input0" type="text" :disabled='isHide' :custom-style="{
									width:'60vw',
									backgroundColor:'#f2f3f5',
									borderRadius: '5px',
									padding:'5px 10px',
									margin:'0',
								}" />
					</view>
				</u-form-item>

				<u-form-item label="发出中标通知书时间" :required="true" :border-bottom="false">
					<u-picker mode="time" v-model="timeShow1" :params="params" @confirm="ensureTime1"></u-picker>
					<u-button @click="getTime(1)" :hair-line="false" :disabled="isHide" :custom-style="{
								position: 'relative',
								backgroundColor:'#f2f3f5',
								borderRadius: '5px',
								padding:'5px 10px',
								margin: '0',
								border:'0px solid #ffffff',
							}">
						{{form.time0 ? form.time0 : '请选择'}}
						<u-icon name="calendar-fill" size="40" style="position: absolute;right: 5%;"></u-icon>
					</u-button>
				</u-form-item>

				<u-form-item label="施工合同签订时间" :required="true" :border-bottom="false">
					<u-picker mode="time" v-model="timeShow2" :params="params" @confirm="ensureTime2"></u-picker>
					<u-button @click="getTime(2)" :hair-line="false" :disabled="isHide" :custom-style="{
								position: 'relative',
								backgroundColor:'#f2f3f5',
								borderRadius: '5px',
								padding:'5px 10px',
								margin: '0',
								border:'0px solid #ffffff',
							}">
						{{form.time1 ? form.time1 : '请选择'}}
						<u-icon name="calendar-fill" size="40" style="position: absolute;right: 5%;"></u-icon>
					</u-button>
				</u-form-item>

				<u-form-item label="合同价" :required="true">
					<view class="content_bottom_row">
						<u-input v-model="form.money3" type="text" :disabled='isHide' :custom-style="{
									width:'50vw',
									backgroundColor:'#f2f3f5',
									borderRadius: '5px',
									padding:'5px 10px',
									margin:'0',
								}" />
						<view style="margin-left: 5px;">
							万元
						</view>
					</view>
				</u-form-item>

				<u-form-item label="建设工程用地规划许可" :required="true">
					<u-radio-group v-model="form.radio10" v-if='!isHide'>
						<u-radio v-for="(item, index) in list" :key="index" :name="item.name" :disabled="item.disabled">
							{{item.name}}
						</u-radio>
					</u-radio-group>
					<view v-if="isHide">{{form.radio10}}</view>
				</u-form-item>

				<u-form-item label="建设工程规划许可" :required="true">
					<u-radio-group v-model="form.radio11" v-if='!isHide'>
						<u-radio v-for="(item, index) in list" :key="index" :name="item.name" :disabled="item.disabled">
							{{item.name}}
						</u-radio>
					</u-radio-group>
					<view v-if="isHide">{{form.radio11}}</view>
				</u-form-item>

				<u-form-item label="施工许可证号" :required="true" :border-bottom="false">					
						<u-input v-model="form.input1" type="text" :disabled='isHide' :custom-style="{
									width:'60vw',
									backgroundColor:'#f2f3f5',
									borderRadius: '5px',
									padding:'5px 10px',
									margin:'0',
								}" />					
				</u-form-item>

				<u-form-item label="开工时间" :required="true" :border-bottom="false">
					<u-picker mode="time" v-model="timeShow3" :params="params" @confirm="ensureTime3"></u-picker>
					<u-button @click="getTime(3)" :hair-line="false" :disabled="isHide" :custom-style="{
								position: 'relative',
								backgroundColor:'#f2f3f5',
								borderRadius: '5px',
								padding:'5px 10px',
								margin: '0',
								border:'0px solid #ffffff',
							}">
						{{form.time2 ? form.time2 : '请选择'}}
						<u-icon name="calendar-fill" size="40" style="position: absolute;right: 5%;"></u-icon>
					</u-button>
				</u-form-item>

			</u-form>

			<u-button :ripple="true" :hair-line="false" :custom-style="{
						backgroundColor: '#5c77ff',
						color:'#ffffff',
						margin:'20px 0',
						fontSize:'18px',
						padding:'5px 0',
						boxSizing:'content-box',
					}"
					@click="submit"
					v-if="!isHide"
					>
				提交
			</u-button>


		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default { //项目进度 前期工作组件
		name: "Qqgz_cp",
		props: ['title', 'projectInfo','state', 'currentIndex'],
		data() {
			return {
				isHide:false,
				file1: '',
				file2: '',
				file3: '',
				file4: '',
				file5: '',
				form: {
					input0:'',
					input1:'',
					money0:'',
					money1:'',
					money3:'',
					projectId:'',
					radio0:'已完成',
					radio1:'是',
					radio10:'已完成',
					radio11:'已完成',
					radio2:'已完成',
					radio3:'已完成',
					radio4:'已完成',
					radio5:'已完成',
					radio6:'已完成',
					radio7:'已完成',
					radio8:'已完成',
					radio9:'已完成',
					time0:'',
					time1:'',
					time2:'',
					file0:'',
					file1:'',
					file2:'',
					file3:'',
					file4:'',
				},
				list: [{
						name: '已完成',
						disabled: false
					},
					{
						name: '未完成',
						disabled: false
					},
				],
				list1: [{
						name: '是',
						disabled: false
					},
					{
						name: '否',
						disabled: false
					},
				],
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				timeShow1: false,
				timeShow2: false,
				timeShow3: false,
			}
		},
		mounted(){
			this.getProjectInfo()
		},
		methods: {
			getProjectInfo(){
				this.$ajax({
					url: `/0/wx/stage/${this.projectInfo.id}`,
					method: 'GET',
					success: (res) => {
						if(res.data.data.length != 0){
							this.isHide = true
							this.form = res.data.data[0]
							let radio1 = this.form.radio1
							for(var i = 0; i < 12; i++){
								this.form['radio' + i] = this.form['radio' + i] ? '已完成' : '未完成'
							}
							this.form.radio1 = this.form.radio1 ? '是' : '否'
						}
					},
					complete: () => {
				
					},
				});
			},
			fileUpload(val) {
				wx.chooseMessageFile({
					count: 1,
					type: 'file',
					success: (res) => {
						if (res.tempFiles[0].path && res.tempFiles[0].type == "file") {
							if (val == 1) {
								this.file1 = res.tempFiles[0].name
							} else if (val == 2) {
								this.file2 = res.tempFiles[0].name
							} else if (val == 3) {
								this.file3 = res.tempFiles[0].name
							} else if (val == 4) {
								this.file4 = res.tempFiles[0].name
							} else if (val == 5) {
								this.file5 = res.tempFiles[0].name
							}
							console.log('shangchaun')
							uni.uploadFile({
								url: this.$my_global.url + '/0/wx/stage/upload', 
								filePath: res.tempFiles[0].path,
								name:'f',
								header: {
									"Content-Type": 'multipart/form-data',
									ssid:uni.getStorageSync('token')
								},
								formData:{
									name:res.tempFiles[0].name,
									projectId: this.projectInfo.id,
								},
								success: (res) => {
									if (res.data && JSON.parse(res.data).state == 200) {
										let url = JSON.parse(res.data).data.url
										if (val == 1) {
											this.form.file0 = url
										} else if (val == 2) {
											this.form.file1 = url
										} else if (val == 3) {
											this.form.file2 = url
										} else if (val == 4) {
											this.form.file3 = url
										} else if (val == 5) {
											this.form.file4 = url
										}
									}
								}
							});
							
						} else {
							this.$refs.uToast.show({
								title: '请选择正确的文件',
								type: 'warning',
							})
						}

					}
				});
			},
			getTime(val) {
				if (val == 1) {
					this.timeShow1 = true
				} else if (val == 2) {
					this.timeShow2 = true
				} else if (val == 3) {
					this.timeShow3 = true
				}
			},
			ensureTime1(data) {
				this.form.time0 = data.year + '-' + data.month + '-' + data.day
			},
			ensureTime2(data) {
				this.form.time1 = data.year + '-' + data.month + '-' + data.day
			},
			ensureTime3(data) {
				this.form.time2= data.year + '-' + data.month + '-' + data.day
			},
			submit(){
				this.form.projectId = this.projectInfo.id
				let radio1 = this.form.radio1
				
				for(var i = 0; i < 12; i++){
					this.form['radio'+i] = this.form['radio'+i] == '已完成'
				}
				if(radio1 == '是'){
					this.form.radio1 = true
				}else{
					this.form.radio1 = false
				}
				this.form.money0 = this.form.money0 
				this.form.money1 = this.form.money1 
				this.form.money3 = this.form.money3 
				this.$ajax({
					url: '/0/wx/stage/json',
					method: 'POST',
					data: this.form,
					success: (res) => {
						if (res.data.state == 200) {
							this.$refs.uToast.show({
								title: '提交成功',
								type: 'success',
							})
							
						}
						this.$ajax({
							url: `/0/wx/stage/complete/${this.projectInfo.id}`,
							method: 'PUT',
							success: (res) => {
								this.$emit('changeCurrentIndex', ++this.currentIndex)
							},
							complete: () => {
						
							},
						});
					},
					complete: () => {
				
					},
				});
				
			},
			downLoadFile(url){
				uni.downloadFile({
					url: this.$my_global.url + url, 
					header:{
						ssid:uni.getStorageSync('token')
					},
					success: (res) => {
						if (res.statusCode === 200) {
							wx.openDocument({
								filePath: res.tempFilePath,
								success: function(res) {
									
								}
				
							})
							this.$refs.uToast.show({
								title: '下载成功',
								type: 'success',
								position: 'top'
							})
						}
					}
				});
			}
		},
		
	}
</script>

<style lang="scss" scoped>
	.content_bottom_row {
		@include flex_layout_row;
		justify-content: flex-start;
		align-items: center;
	}

	.detailContainer {
		background-color: #fff;
		width: 100%;
		padding: 0 15px;
	}

	.content_title {
		.content_title_top {
			display: flex;
			align-items: center;

			.title {
				font-size: 18px;
				margin-right: 10px;
				font-weight: bold;
			}
		}

		.time {
			color: #BFC0C2;
			margin-top: 4px;
		}
	}
	.fileList {
		margin-bottom: 8px;
		display: flex;
		align-items: center;
		position: relative;
		justify-content: space-between;
		>view:nth-of-type(1) {
			margin-right: 8px;
		}
	
		>view:nth-of-type(2) {
			overflow: hidden;
			width: 60%;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	
		.downLoad {
			position: absolute;
			right: 0;
			color: #8294FD;
			border-bottom: 1px solid #8294FD;
	
		}
	}
	.flexContainer {
		display: flex;
		justify-content: space-between;

		.chooseFile {
			width: 50vw;
			border: 1px solid #ccc;
			padding: 0 10px;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.isColor {
			color: #C0C4CC;
		}
	}
</style>
